<template>
<div :class="className">
  <div class="bar" v-if="dataObj.nodes">
    <div class="bar-node" v-for="(node,index) in dataObj.nodes" :key="'bar-node' + index">
      <em><span class="circle1"><span class="circle2"></span></span></em>
      <p>{{ node.date }}</p>
      <p>{{ node.text }}</p>
    </div>
  </div>
  <div class="note" v-if="dataObj.notes">
    <div class="note-li" v-for="(note,index) in dataObj.notes" :key="'note-li' + index">
      <template v-if="isArray(note)">
        <p v-for="(text,index) in note" :key="'note-li-text' + index">{{ text }}</p>
      </template>
      <template v-else>
        <p>{{ note }}</p>
      </template>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    processData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    className: {
      type: String
    },
    processType: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      data: [
        {
          // 默认
          nodes: [
            { text: '申购参与', date: 'T日 15:00前' },
            { text: '起息', date: 'T+1' }
          ],
          notes: ['T日：指申购参与日或到期赎回日', 'T+n日：指T日后（不包括T日）的第n个工作日']
        },
        {
          // B30001 旗峰1号
          nodes: [
            { text: '申购参与', date: 'T' },
            { text: '确认参与', date: 'T+1' },
            { text: '到期赎回', date: 'T' },
            { text: '资金到账', date: 'T+2' }
          ],
          notes: [
            ['T日：指申购参与日或到期赎回日', 'T+n日：指T日后（不包括T日）的第n个工作日'],
            '1个月期计划份额须在赎回日自行赎回，否则自动进入新的下一个月运作周期；不定期计划份额，是否续期以管理人公告为准。'
          ]
        },
        {
          // B30003
          nodes: [
            { text: '申购参与', date: 'T' },
            { text: '确认参与', date: 'T+2' },
            { text: '到期赎回', date: 'T' },
            { text: '资金到账', date: 'T+3' }
          ],
          notes: [
            ['T日：指申购参与日或到期赎回日', 'T+n日：指T日后（不包括T日）的第n个工作日'],
            '每月25日为开放日，遇节假日顺延。'
          ]
        },
        {
          // B30002
          nodes: [
            { text: '申购参与', date: 'T' },
            { text: '确认参与', date: 'T+2' },
            { text: '到期赎回', date: 'T' },
            { text: '资金到账', date: 'T+3' }
          ],
          notes: ['T日：指申购参与日或到期赎回日', 'T+n日：指T日后（不包括T日）的第n个工作日']
        }
      ],
      dataObj: this.processData
    };
  },
  watch: {
    processType() {
      if (this.processType !== '') {
        this.dataObj = this.data[this.processType];
      }
    }
  },
  methods: {
    isArray(str) {
      return Object.prototype.toString.call(str) === '[object Array]';
    }
  }
};
</script>
<style lang="less" scoped>
.bar{
  margin: 10px auto 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
  &:after{
    content: '';
    .posLT(0,0);/*no*/
    .whPx(100%, 2px);
    background-color: @-color-primary;
    z-index: 0;
    border-radius: 2px;/*no*/
  }
  .bar-node{
    text-align: center;
    position: relative;
    z-index: 1;
    margin-top: -11px;
    &:first-child{
      text-align: left;
      em {
        margin-left: -4px;
      }
    }
    &:last-child{
      text-align: right;
      em {
        margin-right: -4px;
      }
    }
    em{
      font-size: 0;
      padding: 4px;
      background: #fff;
      display: inline-block;
      .circle1, .circle2{
        display: inline-block;
      }
      .circle1{
        padding: 3px;
        border-radius: 6px;
        background: rgba(31, 106, 255, 0.2);
      }
      .circle2{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #1F6AFF;
      }
    }
    p{
      font-size: 11px;
      color: #999;
      padding-top: 1px;
      &:last-child{
        color: #333;
      }
    }
  }
}
.note{
  .fc(14px,#333);
  .note-li{
    position: relative;
    p{
      padding-left: 0.8em;
      line-height: 24px;
      margin: 4px auto;
    }
    &:before{
      content: '';
      .posLT(0,8px);
      .whPx(6px,6px);
      background-color: @-color-primary;
      border-radius: 100%;/*no*/
    }
  }
}
.fund_detail{
  .bar{
  margin-bottom: 5px;
  }
  .note{
    background-color:#fff
  }
}

</style>
